<template>
    <el-row>
        <el-col :span="6">
        <el-input v-model="searchInput" class="w-50 m-2" @input="searchEvent(searchInput)"
        placeholder="Type something" :prefix-icon="Search" />
        </el-col>

        <CopyStocksToClipboard  :data="state.filterd"/>
    </el-row>



    <el-table :data="state.filterd" height="700" 
        :cell-class-name="tableCellClassName"
        @sort-change="sortChange"
        :default-sort="state.sort"
        style="width: 100%">
        <el-table-column prop="date" label="date" width="250" sortable/>
        <el-table-column prop="stock" label="stock" width="140"/>
        <el-table-column prop="display" label="display" width="120">
            <template #default="scope"> 
                <to-display :stock="scope.row.stock" :date="scope.row.date"></to-display>
            </template>
        </el-table-column>
        <el-table-column prop="type" label="type" width="160"/>
    </el-table>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { getStockWeekMonitorData } from '../service/stockWeekMonitor';
import ToDisplay from './element/ToDisplay.vue';
import CopyStocksToClipboard from './CopyStocksToClipboard.vue';

const baseKey = "StockWeekMonitor"
const selectKey = baseKey + "Select"
const sortPropKey = "yearPctSortProp"
const sortOrderKey = "yearPctSortOrder"

document.title = baseKey

const searchInput = ref('')
const state = reactive({
    stocks: [],
    data: [],
    filterd: []
})
const loadData = () => { 
    getStockWeekMonitorData().then( res => {
        res.data.forEach(item => {
            item["key"] = item.stock + '_' + item.date.slice(0,9) + '_' + item.type
        });
        state.data = res.data
        state.filterd = res.data
    })
}

loadData()
const searchEvent = (input) => {
    if (input == '') {
        state.filterd = state.data
        return 
    }

    let arr = []
    for (let item of state.data) {
        if(item.key.includes(input)) {
            arr.push(item)
        }
        state.filterd = arr
    }
}
</script>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>